<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-12 10:56:47
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-16 09:14:35
-->
<template>
  <div>
    <div class="wrapper">
      <!-- 头部 -->
      <Header></Header>
      <!-- /头部 -->
      <!-- 轮播图 -->
      <carousel :carousel="carousel1"></carousel>
      <!-- /轮播图 -->
      <!-- 主体 -->
      <div class="content">
        <!-- 左侧相同样式部分 -->
        <Links></Links>
        <!-- /左侧相同样式部分 -->
        <div class="right">
          <!-- 公告部分 -->
          <News></News>
          <!-- /公告部分 -->

          <!-- 小轮播图 -->
          <div class="right-carousel">
            <carousel :carousel="carousel2"></carousel>
            <div class="right-carousel-title">
              2021年全国硕士研究生招生考试杭州...
            </div>
          </div>

          <!-- /小轮播图 -->

          <!-- 各项工作部分 -->
          <Works></Works>
          <!-- /各项工作部分 -->
        </div>
      </div>
      <!-- /主体 -->
      <!-- 底部 -->
      <Footer></Footer>
      <!-- /底部 -->
    </div>
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Carousel from './components/Carousel.vue'
import News from './components/News.vue'
import Links from './components/Links.vue'
import Works from './components/Works.vue'
import Footer from './components/Footer.vue'

import { get } from '../utils/request'

export default {
  name: 'Home',
  data() {
    return {
      carousel1: [],
      carousel2: [],
    }
  },
  components: {
    Header,
    Carousel,
    News,
    Links,
    Works,
    Footer,
  },
  methods: {
    loadCarousel() {
      let url = '/index/carousel/findAll'
      get(url).then((resp) => {
        for (let i = 0; i < resp.data.length; i++) {
          if (i < resp.data.length / 2) {
            this.carousel1.push(resp.data[i])
          } else {
            this.carousel2.push(resp.data[i])
          }
        }
      })
    },
  },
  created() {
    this.loadCarousel()
  },
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.wrapper {
  width: 65%;
  margin: 0 auto;
}
.content {
  display: flex;
  padding-top: 10px;
}
.content .right {
  flex: 1;
  padding-left: 10px;
}
.content .right .right-carousel {
  margin-top: 1em;
  margin-left: 61%;
  width: 38%;
  border: 1px solid #b1dbed;
}
.content .right .right-carousel .right-carousel-title {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  height: 2em;
  line-height: 2em;
  color: #f00;
  background-color: #eeeeee;
}
</style>